<template>
  <div class="app-container">
    <div class="app-title">
      <span>身份证单位核对</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="width:800px; height:15px; margin-top:-17px "
          >
            <el-radio-button
              label="0"
              name="report"
            >未送审</el-radio-button>
            <el-radio-button
              label="1"
              name="didNotReport"
            >已送审</el-radio-button>
            <el-radio-button
              label="-1"
              name="report"
            >被退回</el-radio-button>
            <el-radio-button
              label="all"
              name="didNotReport"
            >全部</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <!-- 图标 -->
      <div>
        <div style="margin-left:285px; position:absolute; margin-top:3px">
          <img
            style="width:16px; height:16px;"
            :src="allimgSrc"
          >
        </div>

        <div style="margin-left:25px; position:absolute;  margin-top:3px">
          <img
            style="width:16px; height:16px;"
            :src="Untreatedimg"
          >
        </div>

      </div>
      <div style="margin-left:110px; position:absolute;  margin-top:3px">
        <img
          style="width:16px; height:16px;"
          :src="Processedimg"
        >
      </div>

      <div style="margin-left:200px; position:absolute;  margin-top:3px">
        <img
          style="width:16px; height:16px;"
          :src="Backimg"
        >
      </div>
      <div class="filter-container">
        <div class="longbuton">
          <el-col
            style="text-align:right;margin-top: -3px;"
            :span="16"
          >
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="Query"
            >
              查询
            </el-button>
            <el-button
              v-if="activeName == '0'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="checkPassLoading"
              @click="checkPass"
            >
              核对通过
            </el-button>
            <el-button
              v-if="activeName == '0'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              :loading="undoCheckLoading"
              type="primary"
              @click="undoCheck"
            >
              撤销核对
            </el-button>
            <el-button
              v-if="activeName == '0'||activeName=='-1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="forReviewLoading"
              @click="forReview"
            >
              送审
            </el-button>
            <el-button
              v-if="activeName == '1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="undoForReviewLoading"
              @click="undoForReview"
            >
              撤销送审
            </el-button>
            <el-button
              v-if="activeName=='0'|| activeName=='-1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="toUpdate"
            >
              修改
            </el-button>
            <el-button
              v-if="activeName == '0'||activeName=='-1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="undoUpdateLoading"
              @click="undoUpdate"
            >
              撤销修改
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>
    <IDCardUnitCheckChildren
      :key="timer"
      ref="chil"
      :tab-pane="activeName"
      @checkPassCallBack="checkPassCallBack()"
      @undoCheckCallBack="undoCheckCallBack()"
      @forReviewCallBack="forReviewCallBack()"
      @undoForReviewCallBack="undoForReviewCallBack()"
      @undoUpdateCallBack="undoUpdateCallBack()"
    />

  </div>
</template>

<script>
import IDCardUnitCheckChildren from '@/views/personInfoMaintenance/IDCardCheck/children/IDCardUnitCheckChildren'
export default {
  name: 'IDCardUnitCheck',
  components: { IDCardUnitCheckChildren },
  data() {
    return {
      listLoading: true,
      checkPassLoading: false,
      undoCheckLoading: false,
      forReviewLoading: false,
      updateLoading: false,
      undoUpdateLoading: false,
      undoForReviewLoading: false,
      allimgSrc: require('@/assets/images/all.png'),
      Untreatedimg: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/processed.png'),
      Backimg: require('@/assets/images/blueselect.png'),
      timer: '',
      activeName: '0',
      isAll: true,
      isNoSubmit: false,
      isSubmit: false,
      isReject: false
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === 'all') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '0') {
        this.allimgSrc = require('@/assets/images/all.svg')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '1') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/select.png')
      }
    }
  },
  created() {},
  methods: {
    // 查询
    Query() {
      this.$refs.chil.query()
    },

    checkPass() {
      this.checkPassLoading = true
      this.$refs.chil.checkPass()
    },
    checkPassCallBack() {
      this.checkPassLoading = false
    },
    undoCheck() {
      this.undoCheckLoading = true
      this.$refs.chil.undoCheck()
    },
    undoCheckCallBack() {
      this.undoCheckLoading = false
    },
    forReview() {
      this.forReviewLoading = true
      this.$refs.chil.forReview()
    },
    forReviewCallBack() {
      this.forReviewLoading = false
    },
    undoForReview() {
      this.undoForReviewLoading = true
      this.$refs.chil.undoForReview()
    },
    undoForReviewCallBack() {
      this.undoForReviewLoading = false
    },
    toUpdate() {
      this.$refs.chil.toUpdate()
    },
    undoUpdate() {
      this.undoUpdateLoading = true
      this.$refs.chil.undoUpdate()
    },
    undoUpdateCallBack() {
      this.undoUpdateLoading = false
    },
    childrenLoad(tab) {
      if (tab.name === 'all') {
        this.isAll = true
        this.isNoSubmit = false
        this.isSubmit = false
        this.isReject = false
      } else if (tab.name === 'noSubmit') {
        this.isAll = false
        this.isNoSubmit = true
        this.isSubmit = false
        this.isReject = false
      } else if (tab.name === 'isSubmit') {
        this.isAll = false
        this.isNoSubmit = false
        this.isSubmit = true
        this.isReject = false
      } else if (tab.name === 'isReject') {
        this.isAll = false
        this.isNoSubmit = false
        this.isSubmit = false
        this.isReject = true
      }
      this.timer = new Date().getTime()
    }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/border.scss"; /*引入公共样式*/
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.longbuton {
  .el-col-16 {
    width: 72%;
    margin-left: 25px;
  }
}
</style>
